<template>
    <view class="main">
        <uni-card spacing="0" padding="0">
            <template v-slot:title>
                <image class="image-header" src="@/static/images/index/network.png"></image>
                <view class="title">运行总览</view>
                <view class="weather"><text style="color:rgb(0, 119, 255);font-size: 32rpx;">{{ position.positionName }}
                        {{ position.positionWeather }} {{ position.positionWdir }} {{ position.positionTemperature
                        }}℃</text>
                </view>
            </template>
            <u-line></u-line>
            <view class="u-body-item">
                <view class="display">
                    <image src="@/static/images/index/shangblue.png" style="height: 40rpx;width: 50rpx;margin: 0 21rpx 0 15rpx;top: -17rpx;"></image>
                    <view class="block">
                        <view>装机规模</view>
                        <view class="number">{{ overviewData.installedCapacity }}KW</view>
                    </view>
                </view>
                <view class="display">
                    <image src="@/static/images/index/heart.png" style="height: 50rpx;width: 50rpx;margin: 0 21rpx 0 15rpx;top: -13rpx;"></image>
                    <view class="block">
                        <view>安全运行</view>
                        <view class="number">{{ runTime }}天</view>
                    </view>
                </view>
            </view>
            <u-line></u-line>
            <view class="u-body-item">
                <view class="display">
                    <image src="@/static/images/index/powergreen.png" class="image"></image>
                    <view class="block">
                        <view>日发电量</view>
                        <view class="number">{{ overviewData.dayPower }}KWh</view>
                    </view>
                </view>
                <view class="display">
                    <image src="@/static/images/index/powerblue.png" class="image"></image>
                    <view class="block">
                        <view>月发电量</view>
                        <view class="number">{{ overviewData.monthPower }}KWh</view>
                    </view>
                </view>
            </view>
            <u-line></u-line>
            <view class="u-body-item">
                <view class="display">
                    <image src="@/static/images/index/powerorgan.png" class="image"></image>
                    <view class="block">
                        <view>年发电量</view>
                        <view style="color:darkgrey;">{{ overviewData.yearPower }}KWh</view>
                    </view>
                </view>
                <view class="display">
                    <image src="@/static/images/index/powertotal.png" style="height: 45rpx;width: 45rpx;margin: 0 19rpx 0 19rpx;top: -15rpx;"></image>
                    <view class="block">
                        <view>累计发电量</view>
                        <view style="color:darkgrey;">{{ overviewData.cumulativePowerGeneration }}KWh</view>
                    </view>
                </view>
            </view>
        </uni-card>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { getWeatherInfo } from '@/api/report'
import { getRegionPowerData } from '@/api/report'
import { getStationStatCount } from '@/api/report'

// 头部栏
const position = reactive({
    positionName: "",
    positionWeather: "",
    positionWdir: "",
    positionTemperature: "",
})
getWeatherInfo().then(res => {
    position.positionName = res.attributes.weatherList.cityName;
    position.positionWeather = res.attributes.weatherList.weathertypename;
    position.positionWdir = res.attributes.weatherList.wind;
    position.positionTemperature = res.attributes.weatherList.temperature;
})


//信息栏
const overviewData = reactive({
    installedCapacity: "",
    dayPower: "",
    monthPower: "",
    yearPower: "",
    cumulativePowerGeneration: "",
})

const date1 = new Date("2023-03-30"); // 结束日期
const date2 = new Date(); // 当前日期
// 计算两个日期之间的天数差
const diffInMilliseconds = date2 - date1;
// 计算天数差
const runTime = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24));

const par = {
    regionId: 285,
    regionType: 2,
}
//发电量
getRegionPowerData(par).then(res => {

    overviewData.dayPower = res.day[0].value;
    overviewData.monthPower = res.month[0].value;
    overviewData.yearPower = res.year[0].value;
    overviewData.cumulativePowerGeneration = res.all[0].value;
})
//装机规模
getStationStatCount(par).then(res => {
    overviewData.installedCapacity = res.cnl[0].value4;
})

</script>

<style scoped lang="scss">
.main {
    height: 100%;
    width: 100%;
}

.image-header {
    height: 35rpx;
    width: 35rpx;
    margin: 27rpx 0 17rpx 25rpx;
}

.title {
    display: inline-block;
    color: #000000;
    margin-left: 9rpx;
    position: absolute;
    top: 19rpx;
    font-size: 32rpx;
}

.weather {
    display: inline-block;
    position: absolute;
    top: 19rpx;
    right: 5%;
}

.display {
    display: inline-block;
    width: 50%;
    padding-left: 10rpx;
}

.u-body-item {
    font-size: 28rpx;
    color: #333;
    padding: 10rpx 5rpx;
}

.block {
    display: inline-block;
    margin: 10rpx 0 10rpx 10rpx;
}

.image {
    height: 60rpx;
    width: 60rpx;
    margin-left: 15rpx;
    margin-right: 10rpx;
    top: -5rpx;
}

.image-total {
    height: 70rpx;
    width: 70rpx;
}
.number{
	color:darkgray;
	font-size: 26rpx;
}
</style>